<template>
    <div id="header">   
        <el-row>
            <el-col :span="24">
                <el-row>
                    <el-col :span="4" class="t-left"><img class="logo" src="/Images/logo3.png" alt=""> <span class="title">{{title}}</span></el-col>
                    <el-col :span="20" class="t-right">
                        <el-row class="user">
                            <el-col :span="8" class="u1"><img class="headimg" :src="headurl" alt=""></el-col>
                            <el-col :span="8" class="u1">{{username}}</el-col>
                            <el-col :span="8" class="u1">{{shezhi}}</el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>



<script>

export default {
    name:"Header",
    data(){
        return{
            username:"小明2",
            shezhi:"设置",
            title:"守望先锋2",
            headurl:"/Images/logo.png"
        }

    }
}

</script>

<style lang="less" scoped>
#header{
    height: 60px;
    background-color:#111;
}

.t-left{
    line-height: 60px;
    height: 60px;
}


.logo{
    float: left;
    display: block;
    margin-left: 30px;
    height:60px;
}
.title{
    float: left;
    display: block;
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    color:#fff;
    
}

.user{
    float: right;
    margin-right: 30px;
    width:200px;
    height: 60px;
    text-align: center;
    .u1{
        height:100%;
        color:#fff;
    }
}
.headimg{
    height:40px;
    padding:10px 0;
}
</style>
